<template>
  <div id="EnergyManage">
    <!-- 能耗管理背景 -->
    <!-- <div id="selectPane">
      <el-select
        clearable
        v-model="selectedTime"
        @change="typeChange"
        style="width: 100%"
      >
        <el-option
          v-for="item in systems"
          :label="item.label"
          :value="item.value"
          :key="item.value"
        ></el-option>
      </el-select>
    </div> -->
    <div class="title"></div>
    <div class="content">
      <div class="consumption" v-for="(item, index) in EnergyList" :key="index">
        <div class="consump_image"></div>
        <div class="consump_bot">
          <div class="hb">
            <div class="hb_img"></div>
            <div class="hb_label">{{ item.hb_name }}</div>
            <div class="hb_num">{{ item.hb_value }}</div>
          </div>
          <div class="tb">
            <div class="tb_img"></div>
            <div class="tb_label">{{ item.tb_name }}</div>
            <div class="tb_num">{{ item.tb_value }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedTime:"",
      systems: [
        {
          label: "按日统计",
          value: "按日统计",
        },
        {
          label: "按月统计",
          value: "按月统计",
        },
         {
          label: "按年统计",
          value: "按年统计",
        }
      ],
      EnergyList: [
        {
          tb_name: "同比",
          tb_value: "72.25%",
          hb_name: "环比",
          hb_value: "12.25%",
        },
        {
          tb_name: "同比",
          tb_value: "62.25%",
          hb_name: "环比",
          hb_value: "22.25%",
        },
        {
          tb_name: "同比",
          tb_value: "52.25%",
          hb_name: "环比",
          hb_value: "32.25%",
        },
      ],
    };
  },
  mounted() {},
  methods:{
    typeChange() {
      this.$message("开发中")
    }
  },
  sockets: {
    sendEnergyConsumption(data) {
      let energyInfo = JSON.parse(data);
      this.EnergyList[0].tb_value = energyInfo.chainComparison;
      this.EnergyList[0].hb_value = energyInfo.synchronization;
    },
    sendWaterConsumption(data) {
      let waterInfo = JSON.parse(data);
      this.EnergyList[1].tb_value = waterInfo.chainComparison;
      this.EnergyList[1].hb_value = waterInfo.synchronization;
    },
    sendGasConsumption(data) {
      let gasInfo = JSON.parse(data);
      this.EnergyList[2].tb_value = gasInfo.chainComparison;
      this.EnergyList[2].hb_value = gasInfo.synchronization;
    },
  },
};
</script>
<style scoped>
#selectPane{
  width: 250px;
  height: 60px;
  position: absolute;
  right: 1100px;
  top: 150px;
  /* bottom: 10px; */
}
#EnergyManage {
  /* padding: 5px 40px;
  box-sizing: border-box; */
  width: 4096px;
  height: 511px;
  background-color: antiquewhite;
  position: absolute;
  margin-top: 1807px;
  background: url("../../../static/images/bottomBackground.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.title {
  width: 645px;
  height: 112px;
  background: url("../../../static/images/EnergyConsumption.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: 920px;
  margin-top: 100px;
}
.content {
  width: 2000px;
  height: 300px;
  margin-left: 1000px;
  display: flex;
  margin-left: 920px;
}
.consumption {
  width: 750px;
  height: 280px;
}
.consump_image {
  width: 732px;
  height: 65px;
  background: url("../../../static/images/electricity.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: 15px;
}
.consumption:nth-child(2) .consump_image {
  background-image: url("../../../static/images/总用气量.png");
}
.consumption:nth-child(3) .consump_image {
  background-image: url("../../../static/images/总用水量.png");
}
.consump_bot {
  width: 732px;
  height: 200px;
  display: flex;
}
.hb {
  width: 243px;
  height: 62px;
  background: rgba(173, 235, 76, 0.2);
  border: 1px solid #adeb4c;
  top: 72px;
  position: relative;
  display: flex;
  margin-left: 20px;
}
.tb {
  width: 345px;
  height: 62px;
  background: rgba(225, 29, 27, 0.2);
  border: 1px solid #e11d1b;
  top: 72px;
  position: relative;
  margin-left: 30px;
  display: flex;
}
.hb_img {
  width: 15px;
  height: 37px;
  background: url("../../../static/images/增加箭头.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 10px;
}
.hb_label {
  width: 80px;
  height: 48px;
  font-size: 30px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 62px;
  letter-spacing: 5px;
  margin-left: 10px;
}
.hb_num {
  width: 120px;
  height: 62px;
  font-size: 30px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  line-height: 62px;
  margin-left: 10px;
  color: #adeb4c;
}
.tb_img {
  width: 15px;
  height: 37px;
  background: url("../../../static/images/减少箭头.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 10px;
}
.tb_label {
  width: 80px;
  height: 48px;
  font-size: 30px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 62px;
  letter-spacing: 5px;
  margin-left: 10px;
}
.tb_num {
  width: 120px;
  height: 62px;
  font-size: 30px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  line-height: 62px;
  margin-left: 10px;
  color: #adeb4c;
}
/* 输入框和下拉选的样式调整 */
.el-select /deep/ .el-input__inner {
  background-color: rgba(22, 46, 145, 0.5);
  border: 1px solid #409eff;
  border-radius: 0;
  height: 40px;
  font-size: 20px;
  font-weight: 500;
  padding: 2 30px;
}

.el-select /deep/ .el-select-dropdown {
  background-color: rgba(22, 46, 145, 0.5);
  border: 1px solid #409eff;
}
.el-select /deep/ .el-select-dropdown__item {
  color: white;
  margin: 1px 2px;
}
.el-select /deep/ .el-select-dropdown__item.hover,
.el-select /deep/ .el-select-dropdown__item:hover {
  background-color: rgba(6, 33, 81, 0.67);
  border: 1px solid #00aeff;
}
.el-select
  /deep/
  .el-select-dropdown__item.selected.hover {
  background-color: rgba(6, 33, 81, 0.67);
  border: 1px solid #00aeff;
}
.el-select /deep/ .el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: rgba(6, 33, 81, 0.67);
}
.el-select /deep/ .el-select-dropdown__list {
  padding: 1px;
}
</style>